<template>
    <div class="mainDiv">
        <div class="rowHead">
            <el-date-picker class="w300" v-model="times" type="daterange" align="right" placeholder="选择日期范围（默认当天日期）" :picker-options="timeArea" @change="getList" v-qx="permission.date">
            </el-date-picker>
        </div>
        <el-row :gutter="20">
        <el-col :span="8" class="pl0">
            <el-table :data="dlist" :stripe="true" @expand-change="showChilds" height="673">
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <div style="display:flex;justify-content: space-between;">
                            <span>【小组】</span>
                            <span>【业绩】</span>
                        </div>
                        <div style="display:flex;justify-content: space-between;padding: 5px;" v-for="(x,index) in scope.row.list" :key="index">
                            <span class="block w50 fl center">{{x.dname}}</span>
                            <el-button size="mini" @click="look(x.did, 3)">{{x.total+' 元'}}</el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="dname" label="部门" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="total" label="业绩">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="look(scope.row.did, 2)" style="margin-top:2px;">{{scope.row.total+' 元'}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-col :span="16" class="pr0">
            <el-table :data="ylist" :stripe="true">
                <el-table-column prop="ordertype" label="业绩类型"></el-table-column>
                <el-table-column prop="name" label="员工姓名"></el-table-column>
                <el-table-column prop="worknum" label="员工工号"></el-table-column>
                <el-table-column prop="xianjinyeji" label="业绩金额"></el-table-column>
                <el-table-column prop="addtime" label="业绩时间" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row.addtime|hourTime}}
                    </template>
                </el-table-column>
                <el-table-column label="详情">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-h-chakan" size="mini" @click="chakan(scope.row)" v-qx="permission.info"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block center bg-light">
                <el-pagination layout="prev, pager, next" :page-size="page.limits" @current-change="currpage" :total="total">
                </el-pagination>
            </div>
        </el-col>
        </el-row>
        
    </div>
</template>
<script>
import C from '@/common/common.js'
import P from '@/service/shop/popup.js'

export default {
  name: 'featList',
  data () {
    return {
      dlist: [],
      ylist: [],
      page: {
        pages: 1,
        limits: 15
      },
      total: 0,
      times: [new Date(), new Date()],
      timeArea: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const td = new Date()
            td.setHours(0)
            td.setMinutes(0)
            td.setSeconds(0)
            td.setMilliseconds(0)
            const start = new Date()
            start.setTime(td.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, td])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const td = new Date()
            td.setHours(0)
            td.setMinutes(0)
            td.setSeconds(0)
            td.setMilliseconds(0)
            const start = new Date()
            start.setTime(td.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, td])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const td = new Date()
            td.setHours(0)
            td.setMinutes(0)
            td.setSeconds(0)
            td.setMilliseconds(0)
            const start = new Date()
            start.setTime(td.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, td])
          }
        }]
      },
      pid: 0,
      floor: 0,
      permission: {
        date: 'bumenfeat_date',
        info: 'bumenfeat_info'
      }
    }
  },
  methods: {
    showChilds: async function (row) {
      let rdata = {
        pid: row.did,
        times: JSON.stringify(this.times)
      }

      if (!this.times) {
        rdata.times = JSON.stringify([new Date(), new Date()])
      }
      let res = await C.ajax('/shop/money/getfeatchild', rdata, 'post')
      if (res) row.list = res
    },

    look: function (id, fr) {
      this.pid = id
      this.floor = fr
      this.getInfo()
    },

    chakan: async function (row) {
      let obj = { id: row.orderid, ordertype: row.ordertype }
      await P.showOrderPopup(obj)
    },

    currpage: function (val) {
      this.page.pages = val
      this.getInfo()
    },

    getInfo: async function () {
      let ydata = {
        pid: this.pid,
        floor: this.floor,
        times: JSON.stringify(this.times),
        page: JSON.stringify(this.page)
      }
      if (!this.times) {
        ydata.times = JSON.stringify([new Date(), new Date()])
      }
      let res = await C.ajax('/shop/money/getfeatlist', ydata, 'post')
      if (res) {
        this.total = res.count
        this.ylist = res.data
      }
    },

    getList: async function () {
      this.dlist = []
      this.ylist = []

      if (!this.times) {
        this.times = [new Date(), new Date()]
      }
      let res = await C.ajax('/shop/money/getfeatinfo', { times: JSON.stringify(this.times) }, 'post')
      if (res) {
        res.forEach((v) => {
          v.list = []
        })
        this.dlist = res
      }
    }
  },
  mounted: function () {
    this.getList()
  }
}
</script>